<template>
  <div>
    <Modal
      v-model="datailToggle" class="iview-outputM"
      :class="{ 'iview-output-acitve' : transitionToggle, 'iview-output-none': !transitionToggle}" draggable footer-hide
      :width="number" :class-name="className" @on-cancel="cancel">
      <div class="header-height" :class="colorTheme">
        <p class="img-radis">
          <b class=" iview-background-theme">
          <span class="iview-background-kind">
          <i class="icon iconfont icon-fourrather iview-color-theme"></i>
        </span>
          </b>
        </p>
      </div>
      <div class="iview-fold">
        <i class="icon iconfont iview-color-theme icon-banyuanzuojiantou" @click="transition"></i>
      </div>
      <div class="output-content">
        <div>
          <Input class="iview-search-button" v-model="putTextModal" clearable search
                 @on-search="outputText(putTextModal)" placeholder="请输入名称"/>
        </div>
        <div>
          <span class="fontbold" @click="toggle(isA)">  {{ isA ? '正常' : '加粗' }}</span>
          <ColorPicker v-model="colorBg"/>
          背景颜色
          <ColorPicker v-model="color1Font"/>
          字体颜色
        </div>
        <p class="iview-title">地图功能按钮</p>
        <Row>
          <Col span="12">
            <div class="classflex" @click="ruler()">
              <i class="icon iconfont iview-color-theme icon-yuanbilichicun"></i>
              <span>比例尺</span>
            </div>
          </Col>
          <Col span="12">
            <div class="classflex">
              <i class="icon iconfont iview-color-theme icon-wenzi11"></i>
              <span>添加文字</span>
            </div>

          </Col>
          <Col span="12">
            <div class="classflex" @click="compass()">
              <i class="icon iconfont iview-color-theme icon-yqfzhinanzhenshi"></i>
              <span>指南针</span>
            </div>
          </Col>
          <Col span="12">
            <div class="classflex" @click=" geographyControl">
              <i class="icon iconfont iview-color-theme icon-bianji"></i>
              <span>地图控制</span>
            </div>
          </Col>
        </Row>
        <div v-if="geographyControlToggle">
          <p class="iview-title">绘图工具</p>
          <Row>
            <Col span="8" >
              <div class="classflex">
                <i class="icon iconfont iview-color-theme icon-xiejiantou"></i>
              </div>
            </Col>
            <Col span="8" >
              <div class="classflex">
                <i class="icon iconfont iview-color-theme icon-xiejiantou"></i>
              </div>
            </Col>
            <Col span="8">
              <div class="classflex">
                <i class="icon iconfont iview-color-theme icon-xiejiantou"></i>
              </div>
            </Col>
            <Col span="8">
              <div class="classflex">
                <i class="icon iconfont iview-color-theme icon-xiejiantou"></i>
              </div>
            </Col>
          </Row>
        </div>
        <div class="button-padding">
          <Button type="info" long @click="">地图输出</Button>
        </div>

      </div>

      <div class="iview-waft">
        <p v-if="putTextModal" v-bind:class="{ 'class-a' : isA, 'class-b': !isA}"
           :style="{backgroundColor:colorBg,color:color1Font}">
          {{putTextModal}}
        </p>
      </div>
      <p class="iview-bili" v-if="rulerModalText">
        当前比例尺 {{rulerText}}
      </p>
      <p class="iview-compass" v-if="compassIcon">
        <i class="icon iconfont iview-color-theme icon-zhinanzhen1"></i>
      </p>
    </Modal>

  </div>

</template>

<script>
  export default {

    data() {
      return {
        name: "outputMap",
        searchModal: false,
        datailToggle: false,
        dropToggleState: true,
        initial: true,
        iniitialFalse: false,
        putTextModal:"",
        colorBg:"",
        color1Font:"",
        isA: false,
        isbold:"normal",
        rulerText:"1:1322323444424",
        rulerModalText:false,
        compassIcon:false,
        geographyControlToggle:false,
        transitionToggle:false
      }
    },
    props: {
      colorTheme: {
        type: String,
        default: ""
      },
      color: {
        type: String,
        default: ""
      },
      number: {
        type: String,
        default: 500
      },
      topNum: {
        type: String,
        default: ""
      },
      className: {
        type: String,
        default: ""
      }
    },
    methods: {
      cancel: function () {
        var m = this;
        //m.$Modal.remove()
      },
      toggle: function (isA) {
        var m = this;
        if (this.isA == false) {
          m.isbold = "bolder"
        } else {
          m.isbild = "normal"
        }
        this.isA = !this.isA;

      },
      transition: function () {
        var m = this;
        m.transitionToggle = !m.transitionToggle;
      },
      geographyControl: function () {
        var m = this;
        m.geographyControlToggle = !m.geographyControlToggle;
      },
      outputText: function (putTextModal) {
      },
      ruler: function () {
        var m = this;
        m.rulerModalText = !m.rulerModalText;

      },
      compass: function () {
        var m = this;
        m.compassIcon = !m.compassIcon;
      },
      dropToggle: function () {
        var m = this;
        //this.dropToggleState = !this.dropToggleState;
        m.dropToggleState = !m.dropToggleState;
      },
      searchFunction: function () {
        this.searchModal = !this.searchModal;

      },
      datailFunction: function () {
        //var m =this;
        this.datailToggle = !this.datailToggle;
        //m.datailContent = !m.datailContent;
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @name: iview-outputM;
  .@{name} {

    .ivu-modal {
      margin: 0px;
      top: 90px;
      left: calc(~ "100vw - (340px) ");
    }
    .header-height {
      height: 80px;
    }
    .iview-fold {
      position: absolute;
      left: -30px;
      top: 230px;
      .icon {
        background: #fff;
        border-top-left-radius: 200px;
        border-bottom-left-radius: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .img-radis {
      text-align: center;
      b {
        display: inline-block;
        padding: 5px;
        border-radius: 50%;
        position: relative;
        bottom: -55px;
        span {
          display: inline-flex;
          width: 40px;
          height: 40px;
          /*padding: 20px;*/
          border-radius: 50%;
          justify-content: center;
          align-items: center;
          i {
            font-size: 30px;
          }
        }
      }

    }
    .output-content {
      margin-top: 40px;
      padding: 10px;
      .iview-title {
        padding: 10px 0;
      }
      .button-padding{
        padding-top: 20px;
        padding-bottom: 10px;
      }
      .ivu-row {
        border: 1px solid #d3d3d3;
      }
      .classflex {
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          margin-right: 10px;
        }
      }
      .fontbold {
        padding: 10px 20px;
      }
      .iview-search-button {
        .ivu-input-icon {
          /*right: 60px;*/
        }
      }

    }
    &.iview-output-acitve {
      .ivu-modal {
        /*left: calc(~"100vw - (15px)" );*/
        left: calc(~"100vw ");
      }
    }

  }

  .iview-bili {
    position: fixed;
    left: 20px;
    bottom: 20px;
    font-size: 18px;
  }

  .iview-compass {
    position: fixed;
    left: 80px;
    top: 80px;
    font-size: 40px;
  }

  .iview-waft {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    right: 0;
    text-align: center;

    p {
      margin-top: 40px;
      font-size: 18px;
      display: inline-block;
      padding: 10px 20px;
    }
    .class-a {
      font-weight: bolder;
    }
    .class-b {
      font-weight: normal;
    }

  }
  .ivu-input-wrapper{
   /*  margin-bottom: 10px !important; */
  }
</style>
